stufflog3/frontend/src/routes/[scope=prettyid]/__layout.svelte

<script lang="ts" context="module">
  import type { Load } from "@sveltejs/kit/types/internal";

  import { sl3 } from "$lib/clients/sl3";
  import type { ProjectEntry } from "$lib/models/project";

  export const load: Load = async({ fetch, params, stuff }) => {
    const scopeId = parseInt(params.scope.split("-")[0]);
    const client = sl3(fetch, stuff.idToken);

    const [scope, projects] = await Promise.all([
      client.findScope(scopeId),
      client.listProjects(scopeId),
    ]);

    return {
      props: { projects, scope },
    };
	}
</script>

<script lang="ts">
  import {page} from "$app/stores"
  import Columns from "$lib/components/layout/Columns.svelte";
  import Column from "$lib/components/layout/Column.svelte";
  import ScopeContext from "$lib/components/contexts/ScopeContext.svelte";
  import type Scope from "$lib/models/scope";
  import ProjectMenu from "$lib/components/scope/ProjectMenu.svelte";
  import ProjectListContext from "$lib/components/contexts/ProjectListContext.svelte";
  import ScopeMenu from "$lib/components/scope/ScopeMenu.svelte";
  import { scopePrettyId } from "$lib/utils/prettyIds";
  import ScopeHeader from "$lib/components/scope/ScopeHeader.svelte";

  export let scope: Scope;
  export let projects: ProjectEntry[];

  let hideMobile: boolean;
  $: hideMobile = $page.url.pathname !== `/${scopePrettyId(scope)}`
</script>

<svelte:head><title>{scope.abbreviation}: {$page.stuff.title} – Stufflog 3</title></svelte:head>

<ScopeContext scope={scope}>
  <ProjectListContext projects={projects}>
    <Columns wide>
      <Column hideMobile={hideMobile} >
        <ScopeHeader />
        <ScopeMenu /> 
        <ProjectMenu />
      </Column>
      <Column span={4}>
        <slot></slot>
      </Column>
    </Columns>
  </ProjectListContext>
</ScopeContext>